<div id="keyboardHelp" class="modal">
  <div>
    <h2>Keyboard Shortcuts</h2>
    <table>
      <thead>
        <tr>
          <th class="shortcut">Shortcut</th>
          <th>Action</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <td>ctrl + [num]</td>
          <td>Toggle nth panel</td>
        </tr>
        <tr>
          <td colspan="2">
            <small>
              <input type="checkbox" id="enablealt" class="enablealt">
              <label for="enablealt">Require alt key, leaving cmd+1, 2 etc for tab switching.</label>
            </small>
          </td>
        </tr>
        <tr>
          <td>ctrl + 0</td>
          <td>Close focused panel</td>
        </tr>
        <tr>
          <td>ctrl + enter</td>
          <td>Re-render output.<br>If console visible: run JS in console</td>
        </tr>
        <tr>
          <td>Ctrl + l</td>
          <td>Clear the console</td>
        </tr>
        <tr>
          <td>ctrl + /</td>
          <td>Toggle comment on selected lines</td>
        </tr>
        <tr>
          <td>ctrl + ]</td>
          <td>Indents selected lines</td>
        </tr>
        <tr>
          <td>ctrl + [</td>
          <td>Unindents selected lines</td>
        </tr>
        <tr>
          <td>tab</td>
          <td>Code complete &amp; <a href="http://docs.emmet.io/" target="_blank">Emmet</a> expand</td>
        </tr>
        <tr>
          <td>ctrl + shift + L</td>
          <td>Beautify code in active panel</td>
        </tr>
        <tr>
          <td>ctrl + s</td>
          <td>Save &amp; lock current Bin from further changes</td>
        </tr>
        <tr>
          <td>ctrl + shift + s</td>
          <td>Open the share options</td>
        </tr>
        <tr>
          <td>ctrl + y</td>
          <td>Archive Bin</td>
        </tr>
        <tr><td colspan="2"><small><br><a href="{{root}}/help/keyboard-shortcuts" target="_blank">Complete list of JS Bin shortcuts</a></small></td></tr>
      </tbody>
    </table>
  </div>
</div>